<template>
    <div style="margin-top: 30px;">
        <el-row>
            <el-col :md="10" :offset="7">
                <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="150px" class="demo-ruleForm">
                    <el-form-item label="运营商接口套装：">
                        <el-input v-model="ruleForm.name" auto-complete="off" :disabled="true"></el-input>
                    </el-form-item>
                    <el-form-item label="接口名称：" prop="api_name">
                        <el-input v-model="ruleForm.api_name" auto-complete="off"></el-input>
                    </el-form-item>
                    <el-form-item label="接口种类：" prop="api_type">
                        <el-select v-model="ruleForm.api_type" filterable placeholder="请选择" class="w100">
                            <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
                            </el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="报竣验证：">
                        <el-radio-group v-model="ruleForm.type1">
                            <el-radio :label="1">Y</el-radio>
                            <el-radio :label="2">N</el-radio>
                        </el-radio-group>
                    </el-form-item>
                    <el-form-item label="查询验证：">
                        <el-radio-group v-model="ruleForm.type2">
                            <el-radio :label="1">Y</el-radio>
                            <el-radio :label="2">N</el-radio>
                        </el-radio-group>
                    </el-form-item>
                    <el-form-item label="参数：">
                        <el-button type="primary" @click="add">增加参数</el-button>
                    </el-form-item>
                </el-form>
            </el-col>
        </el-row>
        <el-row class="mb10" v-for="(item, index) in canshu" :key="index">
            <el-col :md="4" :offset="6" class="mr10">
                <el-input v-model="item.can_name" auto-complete="off" placeholder="参数名"></el-input>
            </el-col>
            <el-col :md="4" class="mr10">
                <el-input v-model="item.canshu_name" auto-complete="off" placeholder="参数变量名"></el-input>
            </el-col>
            <el-col :md="3" class="mr10">
                <el-select v-model="item.can_type" filterable placeholder="字符窜">
                    <el-option v-for="item in can_type" :key="item.value" :label="item.label" :value="item.value">
                    </el-option>
                </el-select>
            </el-col>
            <el-col :md="3" class="mr10">
                <el-input v-model="item.shuoming" auto-complete="off" placeholder="参数说明"></el-input>
            </el-col>
            <el-button plain @click="del(index)">删除</el-button>
        </el-row>
        <el-row>
            <el-col :md="10" :offset="7">
                <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="150px" class="demo-ruleForm">
                    <el-form-item label="更新外部数据接口：">
                        <el-radio-group v-model="ruleForm.type3">
                            <el-radio :label="1">Y</el-radio>
                            <el-radio :label="2">N</el-radio>
                        </el-radio-group>
                    </el-form-item>
                    <el-form-item label="调用前更新数据：">
                        <el-radio-group v-model="ruleForm.type4">
                            <el-radio :label="1">Y</el-radio>
                            <el-radio :label="2">N</el-radio>
                        </el-radio-group>
                    </el-form-item>
                    <el-form-item label="调用后更新数据：">
                        <el-radio-group v-model="ruleForm.type5">
                            <el-radio :label="1">Y</el-radio>
                            <el-radio :label="2">N</el-radio>
                        </el-radio-group>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" @click="submitForm('ruleForm')">提交</el-button>
                        <el-button @click="resetForm('ruleForm')">取消</el-button>
                    </el-form-item>
                </el-form>
            </el-col>
        </el-row>
    </div>
</template>

<script>
    export default {
        data() {
            return {
                options: [{
                    value: '选项1',
                    label: '操作'
                }, {
                    value: '选项2',
                    label: '查询'
                }],
                ruleForm: {
                    name: '5435',
                    api_name: '',
                    api_type: '',
                    type1: 1,
                    type2: 1,
                    type3: 1,
                    type4: 1,
                    type5: 1
                },
                can_type: [{
                        value: '1',
                        label: '字符窜'
                    },
                    {
                        value: '2',
                        label: '数组'
                    },
                    {
                        value: '3',
                        label: '整型'
                    }
                ],
                canshu: [],
                rules: {
                    api_name: [
                        {
                            required: true,
                            message: '请输入接口名称',
                            trigger: 'blur'
                        }
                    ],
                    api_type: [{
                        required: true,
                        message: '请选择接口种类',
                        trigger: 'change'
                    }]
                },
                obj: {
                    can_name: '',
                    canshu_name: '',
                    can_type: '字符窜',
                    shuoming: ''
                }
            };
        },
        created() {
            this.getData()
        },
        methods: {
            submitForm(formName) {
                this.$refs[formName].validate((valid) => {
                    if (valid) {
                        console.log(11111)
                    } else {
                        console.log('error submit!!');
                        return false;
                    }
                });
            },
            resetForm(formName) {
                this.$refs[formName].resetFields();
                this.$router.push({
                    path: '/carriers'
                })
            },
            getData() {
                this.$axios.get(`/api/carriers/${this.$route.query.id}/edit`).then((res) => {
                    this.ruleForm.name = res.data.name
                    this.ruleForm.carrier_type = res.data.carrier_type
                    this.ruleForm.contact_person = res.data.contact_person
                    this.ruleForm.email = res.data.email
                    this.ruleForm.phone_number = res.data.phone_number
                })
            },
            add() {
                this.canshu.push(this.obj)
            },
            del(index) {
                this.canshu.splice(index, 1)
            }
        }
    }
</script>

<style lang="scss" scoped>
    .mr10 {
        margin-right: 10px;
    }
    
    .mb10 {
        margin-bottom: 10px;
    }

    .w100 {
        width: 100%;
    }
</style>

